<template>
    <el-dialog custom-class="travel-reced-order-list" v-el-drag-dialog="{ drag: true, full: false, resize: false }"
        :visible="true" :close-on-click-modal="false" @close="closeMd" :title="'被推荐人订单列表'" width="80%">
        <div ref="dgtools" class="filter-container">
            <div class="dgts-row">
                <div class="dgts-text-tj1">
                    <b class="tr-it-title">统计</b>
                    <el-divider direction="vertical"></el-divider>
                    <b class="tr-it c-red">订单总价：{{ tj.totalPrice || 0 }}元</b>
                    <el-divider direction="vertical"></el-divider>
                    <b class="tr-it c-green">可提成总金额：{{ tj.agentPrice || 0 }}元</b>
                    <el-divider direction="vertical"></el-divider>
                    <b class="tr-it c-red">已提成总金额：{{ tj.alreadyAgentPrice || 0 }}元</b>
                </div>

                <!-- <div class="dgts-text-tj2">
                    <b class="tr-it-title">所选统计</b>
                    <el-divider direction="vertical"></el-divider>
                    <b class="tr-it c-green">已选提成总金额：{{tj.jzPrice}}元</b>
                </div> -->
            </div>

            <div class="dgts-fm">
                <el-form :model="dg.ps" :inline="true" @keyup.enter.native="getDgList">
                    <!-- <el-form-item prop="useTravelFind">
                        <el-select
                            clearable filterable
                            remote reserve-keyword
                            :remote-method="queryCusPageList"
                            style="width: 140px"
                            v-model="dg.ps.useTravelFind"
                            placeholder="用车单位">
                            <el-option
                                v-for="it in useCarCusArr"
                                :key="it.baseUserId.uname"
                                :label="it.unitName"
                                :value="it.id"
                                @click.native="queryLinkManList(it)">
                                <span>{{it.unitName}}</span>
                                <span>{{it.baseUserId.realName}}</span>
                            </el-option>
                        </el-select>
                    </el-form-item> -->

                    <!-- <el-form-item prop="routeLink">
                        <el-select
                            v-model="dg.ps.routeLink"
                            clearable filterable
                            :placeholder="'联系人'"
                            style="width: 120px">
                            <el-option
                                v-for="(it, i) in linkManArr"
                                :key="i"
                                :label="it.realName"
                                :value="it.uname">
                                <span>{{it.realName}}</span>
                                <span>{{it.phone}}</span>
                            </el-option>
                        </el-select>
                    </el-form-item> -->

                    <el-form-item prop="timeType">
                        <el-select v-model="dg.ps.timeType" clearable filterable :placeholder="'时间类型'" style="width: 120px">
                            <el-option v-for="(it, i) in timeTypeArr" :key="i" :label="it.label" :value="it.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item prop="sedate">
                        <el-date-picker v-model="dg.ps.sedate" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" style="width: 210px" value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>

                    <!-- <el-form-item prop="driver">
                        <el-option
                            v-model="dg.ps.driver"
                            v-for="(it, i) in driverArr"
                            :key="i"
                            :label="it.label"
                            :value="it.value">
                        </el-option>
                    </el-form-item> -->

                    <el-form-item prop="plateNum">
                        <el-input placeholder="车牌号" v-model="dg.ps.plateNum" clearable style="width: 120px;" />
                    </el-form-item>

                    <el-form-item prop="find">
                        <el-input v-model="dg.ps.find" clearable style="width: 250px" placeholder="行程详情/订单号">
                        </el-input>
                    </el-form-item>

                    <el-form-item prop="receiveStatus">
                        <el-select v-model="dg.ps.receiveStatus" clearable filterable placeholder="领取状态"
                            style="width: 100px">
                            <el-option v-for="(it, i) in receiveStatusArr" :key="i" :label="it.label" :value="it.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item prop="orderStatus">
                        <el-select v-model="dg.ps.orderStatus" clearable filterable placeholder="订单状态" style="width: 100px">
                            <el-option v-for="(it, i) in orderStatusArr" :key="i" :label="it.label" :value="it.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item prop="toAscDesc">
                        <el-select v-model="dg.ps.toAscDesc" clearable filterable placeholder="排序" style="width: 100px">
                            <el-option v-for="(it, i) in sortArr" :key="i" :label="it.label" :value="it.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-button type="primary" icon="el-icon-search" @click="getDgList">
                        搜索
                    </el-button>
                    <el-button type="success" icon="el-icon-check" @click="confirmReceive">
                        确认领取
                    </el-button>
                </el-form>
            </div>
        </div>

        <el-table :ref="dg.tbName" :data="dg.list" row-key="id" :height="bodyHeight - 100" border fit
            :row-class-name="rowClassName" @header-dragend="dragHeader" @selection-change="selRowChange">
            <el-table-column fixed="left" type="index" label="编号" align="center" :resizable="false" width="40">
            </el-table-column>
            <el-table-column fixed="left" type="selection" align="center" :resizable="false" width="40">
            </el-table-column>

            <el-table-column v-for="(col, index) in dg.columns" :key="index" :class-name="dg.dgName" :prop="col.field"
                :label="col.label" :width="col.width">
                <template slot-scope="{row}">
                    <template v-if="col.field == 'orderStatus'">
                        {{ row.orderStatus == 'COMPLETED' ? '已完成' : '未完团' }}
                    </template>

                    <template v-else-if="col.field == 'receiveStatus'">
                        {{ row.agentRewardMark ? '已领取' : '未领取' }}
                    </template>

                    <template v-else>{{ getColVal(row, col.field) }}</template>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog';
import DataGridBase from '@/views/mixins/DataGridBase';
import DataGridResize from '@/views/mixins/DataGridResize';

import * as financeService from '@/api/services/travel/finance.service';
import * as orderService from "@/api/services/order.service";
export default {
    name: 'TravelRecedOrderList',
    mixins: [DataGridBase, DataGridResize],
    directives: { elDragDialog },
    props: { myData: Object },
    data() {
        let cols = [
            { label: "订单编号", field: "orderNum", width: 150 },
            { label: "车牌号", field: "disCarId.plateNum" },
            { label: "开始日期", field: "stime" },
            { label: "订单价格", field: "price" },
            { label: "行程详情", field: "routeDetail", width: 500 },
            { label: "订单状态", field: "orderStatus" },
            { label: "领取状态", field: "receiveStatus" },
            { label: "主订单编号", field: "mainOrderNum" },
        ];
        return {
            dg: {// 表格参数对象
                dgName: 'dg',
                tbName: 'travelRecedOrderListTb',
                total: 0,
                list: [],
                srcCols: cols,
                columns: [],
                selRows: [],
                ps: { // 过滤参数
                    page: 1, rows: 20,
                    // 查询指定推荐用户的订单
                    useInfo: this.myData.uname,
                    // 订单起止日期
                    sedate: [],
                    // 用车单位姓名/电话/单位名称 eg:张三
                    useTravelFind: null,
                    // 行程联系人姓名/电话 eg:张三
                    // routeLink: null, 
                    // 时间类型 eg:0开始时间 1添加时间 2续团时间
                    timeType: 0,
                    // 车牌号
                    plateNum: '',
                    // 行程详情/备注/订单号
                    find: '',
                    // 领取状态 eg:1-已领取 0-未领取 ''-全部
                    receiveStatus: '',
                    // 订单状态 eg:1-已完成 0-未完团 ''-全部
                    orderStatus: '',
                    // 开始时间排序 eg:升序【ASC】 降序【DESC】
                    toAscDesc: 'ASC',
                },
            },

            // 数组统计
            tj: {
                // 订单总价
                totalPrice: 0,
                // 可提成总金额
                agentPrice: 0,
                // 已提成总金额
                alreadyAgentPrice: 0,
            },


            // 用车单位-数组
            useCarCusArr: [],
            // 联系人-数组
            linkManArr: [],
            // 时间类型-数组
            timeTypeArr: [
                { label: '用车时间', value: 0 },
                { label: '下单时间', value: 1 },
                { label: '续团时间', value: 2 },
            ],
            // 领取状态-数组
            receiveStatusArr: [
                { label: '全部', value: '' },
                { label: '已领取', value: '1' },
                { label: '未领取', value: '0' },
            ],
            // 订单状态-数组
            orderStatusArr: [
                { label: '全部', value: '' },
                { label: '已完成', value: 'COMPLETED' },
                { label: '未完团', value: '0' },
            ],
            // 时间排序-数组
            sortArr: [
                { label: '升序', value: 'ASC' },
                { label: '降序', value: 'DESC' },
            ],

        };
    },
    created() {
        const that = this;

        console.log('父级传入的数据', this.myData);

        that.initTbSetData(that.dg.dgName);
        that.getDgList();
    },
    methods: {
        closeMd() {
            this.$emit('myClick', { state: false });
        },
        // 查询-用车单位数据
        queryCusPageList(query) {
            if (!query) return (this.cusOptions = []);

            commonSer.queryComboCusPageList({ find: query }).then((res) => {
                if (res.code == 1) this.cusOptions = res.data;
            });
        },
        /** 获取-列表数据 */
        getDgList() {
            const that = this, ps = that.U.scopy(that.dg.ps);

            ps.stime = ps.sedate?.length ? ps.sedate[0] : '';
            ps.etime = ps.sedate?.length ? ps.sedate[1] : '';
            delete ps.sedate;

            financeService.recCusOrderPage(ps).then(res => {
                if (res.code == 1) {
                    let list = res.data;

                    list.forEach(it => { it.dgName = that.dg.dgName; });

                    that.dg.list = list;
                    that.dg.total = res.count;

                    // 设置统计数据
                    that.tj = { ...res.statics };
                }
            });
        },
        // 确认领取
        confirmReceive() {
            const that = this, U = that.U, rows = that.getSeledRows();

            if (rows.length === 0) {
                U.qerror('请至少选择一条订单');
            } else {
                U.qconfim(`确定将所选订单状态改为已领取？`).then(r => {
                    if (r) {
                        // U.info('开发中...');

                        let loading = U.qloading("请稍后...");
                        let ids = rows.map(it => it.id).join(',');
                        financeService.confirmReceive({ ids: ids }).then((res) => {
                            U.qclose(loading);

                            if (!res || res.code != 1) {
                                U.qerror(res.msg);
                            } else {
                                U.qsuccess(res.msg);

                                // 调用方法-重新加载
                                that.getDgList();
                            }
                        });
                    }
                });
            }
        },

    },
}
</script>
